<template>
    <div>
        <template>
            <van-notice-bar
                    color="#e71500"
                    background="#fff"
                    left-icon="volume-o"
                    :text="warmprompt"
                    scrollable
            />
        </template>
        <div class="seller-details" v-if="judges">
            <div class="content-watermark" v-if="materials.watermark">
                <p v-for="(item, index) in 300" ref="watermarktext">{{materials.watermark}}</p>
            </div>
            <div class="seller-details-title">
                <div class="user-box-left" v-if="materialsuser.noticeerweima">
                    <van-button type="default" color="#4482e4" size="small"
                                @click="showImg(materialsuser.noticeerweima)">接受推送
                    </van-button>
                </div>
                <div class="user-box-right" v-if="materialsuser.wxerweima">
                    <van-button type="default" color="#4482e4" size="small" @click="showImg(materialsuser.wxerweima)">
                        联系作者
                    </van-button>
                </div>

                <p>{{materials.title}}</p>
                <p class="p2" :class="{'isreturnColor': materials.isreturn!=1}" @click="showReturn(materials.isreturn)">
                    <span class="isreturn">体育资讯</span></p>
                <p class="p2" v-if="materials.saletype==1 && materials.baoshi && materials.baodays"
                   style="font-size: 12px; color: #4482e4"><span class="isreturn"
                                                                 style="background: #4482e4; border-color: #4482e4; margin-right: 10px">包{{materials.baodays}}天</span>
                    <span v-if="materials.baoshi.enddate">到期时间：{{materials.baoshi.enddate}}</span></p>
                <p class="p2 xsck" style="margin: 10px 0" v-if="materials.islimittimeshow==1 && countdowns"><span
                        style="background: #f9883c;">限时查看</span> {{limittimeshowtitle}}</p>
                <p class="p2" style="margin: 10px 0" v-else>{{materials.intro}}</p>
            </div>

            <div class="seller-details-seller">
                <div class="seller-details-seller-box">
                    <img :src="materialsuser.avatar">
                    <div class="left">{{materialsuser.nickname}}</div>
                    <router-link class="a2" :to="'/Wodeliao/zaishouliebiao/'+materials.userid">
                        在售列表({{materialsuser.salenumber}})
                    </router-link>
                    <!--<a class="a1 active" >取消关注</a>-->
                    <a class="a1 active" v-if="materialsuser.foucsstatus==1" @click="guanzhu()">取消关注</a>
                    <a class="a1" v-else @click="guanzhu()">关注TA</a>
                </div>
            </div>
            <template v-if="yucets.messageshow == 1">
                <div class="yuce-style">{{yucets.messagecontent}}</div>
            </template>
            <div class="preOrnext" v-if="fanMaterials.previous == 1 || fanMaterials.nextbutton == 1">
                <div class="prebtn" v-if="fanMaterials.previous == 1" @click="otherPage(fanMaterials.previousmateid)">
                    上一单
                </div>
                <div class="nextbtn" v-if="fanMaterials.nextbutton == 1"
                     @click="otherPage(fanMaterials.nextbuttonmateid)">下一单
                </div>
            </div>
            <div class="seller-details-box">
                <span class="i_1 iconmtype" v-if="materials.mtype=='1'">红</span>
                <span class="i_2 iconmtype" v-else-if="materials.mtype=='2'">黑</span>
                <span class="i_3 iconmtype" v-else-if="materials.mtype=='3'">走</span>
                <div class="top" style="padding: 0 15px; box-sizing: border-box">
                    <p class="time">发布于&nbsp;{{materials.createtime}}</p>
                    <p class="number"><span class="red_ft">{{materials.hourtime}}</span></p>
                </div>
                <div class="content" style="padding: 0 15px; box-sizing: border-box">
                    <div v-if="showallstatus == 1 && materials.saletype==1 && materials.baoshi.yanshi && materials.baoshi.yanshi.length>0"
                         style="margin-top: 12px; color: #fc5d4d;">
                        <div style="font-weight: bold; margin-bottom: 5px">作者操作：</div>
                        <div v-for="(item,index ) in materials.baoshi.yanshi">当前包时段内的用户包时延长【{{item.yanshidays}}天】</div>
                    </div>
                    <div v-for="(item,index) in materials.mfcontent">
                        <div class="fontSizeMax" style="white-space: pre-line;">{{item.content}}</div>
                        <div>
                            <img :src="Url+pic" v-for="(pic,index) in item.pics" v-if="pic"/>
                        </div>
                    </div>
                    <div v-if="showallstatus == 1" ref="element"
                         style="position: relative; overflow: hidden; margin-top: 24px;">
                        <div v-if="materials.islimittimeshow==1 && countdowns">
                            <div class="countdowndiv">
                                <span class="flag">{{countDownHour}}</span>
                                <span>:</span>
                                <span class="flag">{{countDownMinute}}</span>
                                <span>:</span>
                                <span class="flag">{{countDownSecond}}</span>
                            </div>
                            <div class="countdowntips">卖家设置倒计时后查看详情</div>
                        </div>
                        <div v-else>
                            <!--<div class="content-watermark" v-if="materials.watermark">-->
                            <!--<p v-for="(item, index) in cols" ref="watermarktext">{{materials.watermark}}</p>-->
                            <!--</div>-->
                            <div v-for="(item,index) in materials.pricecontent" class="contentgroup">
                                <div class="contentgroup_line01">
                                    <span>更新于：{{item.createtime}}</span>
                                </div>
                                <div class="fontSizeMax" style="white-space: pre-line;z-index: 9">{{item.content}}</div>
                                <div v-for="(pic,indexs) in item.pics">
                                    <!-- @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()"-->
                                    <!-- <img :src="Url+pic"  v-if="pic" @touchstart.prevent="qrcodeimgStart(index)" @touchend.prevent="qrcodeimgEnd()" ref="qrcode"/> -->
                                    <!-- <img :src="Url+pic" /> -->
                                    <van-image
                                            width="100%"
                                            height="100%"
                                            style="z-index: 9"
                                            v-if="pic"
                                            :src="Url+pic"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>
                    <template v-else>
                        <!--<van-divider>以下为付费阅读内容</van-divider>-->
                        <div class="obligation">解锁后可查看付费阅读内容</div>
                        <!--<div class="obligation">等待解锁</div>-->
                        <div class="Affirms">
                            作者方案为体育赛事分析内容，战绩标签为历史近N场数据统计，并非对未来分析结果准确性的承诺，信息仅供参考，并非任何投注建议！本网不支持任何售彩服务!相关部门已暂停网络购彩，一切互联网购彩皆属非法！
                        </div>
                    </template>

                </div>
                <div class="report" @click="report()" style="margin-right: 15px"
                     v-if="showallstatus == 1 && !countdowns && materials.islimittimeshow!=1">投诉/举报
                </div>
            </div>
            <div class="seller-details-box" style=" padding: 15px;" v-if="mbtsbutton==1">
                <div class="codeusermsg">
                    <div class="left">
                        <img :src="materialsuser.avatar"/>
                    </div>
                    <div class="right">
                        <p><font></font>
                            <!-- react-text: 1463 -->Hi~
                            <!-- /react-text --><span><img style=" width: .5rem;"
                                                           src=""/></span>
                            <!-- react-text: 1466 -->你暂时还收不到我的最新消息哦~&nbsp;&nbsp;&nbsp;&nbsp;
                            <!-- /react-text --><b class="red_ft">点击下方按钮，第一时间接收新料推送~ </b></p>
                    </div>
                </div>
                <a class="seller-details-gztx_btn" @click="showgzerwm()">接收消息通知</a>
            </div>
            <div class="seller-details-box"><p v-if="paystatus==0" class="zs" style="margin-bottom: 30px"><span
                    style="font-size: 14px">已阅读并同意</span><span @click="showarticle"
                                                               style="color: #f9883c;font-size: 14px" v-if="article.id">《{{article.title}}》</span>
            </p>
                <p class="zs">{{announcement}}</p></div>
        </div>
        <!--<div v-if="paystatus==1" style="height: 30px;width: 100%"></div>-->
        <div class="buybtn" v-if="paystatus==1">

            <van-action-sheet v-model="btngroupShow" title="请确认支付">
                <div class="pay-title">
                    <div>￥</div>
                    <div>{{payprice}}</div>
                </div>
                <tempalte v-if="paybutton.wxbutton==1">
                    <van-radio-group v-model="radio">
                        <van-cell-group :border="false">
                            <van-cell clickable @click="radio = '2'">
                                <template #default>
                                    <div class="pay-style">
                                        <img src="../../assets/img/alipay_icon.png" alt="">
                                        <div class="pay-text">支付宝</div>
                                    </div>
                                </template>
                                <template #right-icon>
                                    <van-radio name="2"/>
                                </template>
                            </van-cell>
                            <van-cell clickable @click="radio = '1'">
                                <template #default>
                                    <div class="pay-style">
                                        <img src="../../assets/img/wxpay_icon.png" alt="">
                                        <div class="pay-text">微信支付</div>
                                    </div>
                                </template>
                                <template #right-icon>
                                    <van-radio name="1"/>
                                </template>
                            </van-cell>
                        </van-cell-group>
                    </van-radio-group>
                    <van-cell clickable @click="isbalancepay()">
                        <template #default>
                            <div class="pay-style">
                                <img src="../../assets/img/yue_icon.png" alt="">
                                <div class="pay-text-yue">
                                    <div>余额抵扣</div>
                                    <div class="pay-yue-style" style="display: flex;align-items: center">
                                        可用余额:{{user.money}}
                                    </div>
                                </div>
                            </div>
                        </template>
                        <template #right-icon>
                            <div class="af_right">
                                <span style="color: #fc5d4d" v-if="balancepay">-￥{{balancepaymoney}}</span>
                                <label class="am-switch">
                                    <input type="checkbox" name="" class="am-switch-checkbox" value="off"
                                           @click.stop="isbalancepay()" :checked="balancepay">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </template>
                    </van-cell>
                    <div class="tips_af on" style="padding: 10px 16px;">
                        <div style="height: 30px">
                            <p class="zs" style="margin-bottom: 0;font-size: 13px">
                                <van-checkbox v-model="checked" shape="square" checked-color="#f9883c;"
                                              icon-size="14px">
                                    <span>购买即代表您已阅读并同意</span><span @click.stop="showarticle" style="color: #f9883c;"
                                                                   v-if="article.id">《{{article.title}}》</span>
                                </van-checkbox>

                            </p>
                        </div>
                    </div>
                    <div>
                        <div class="btn2" @click="pay" :class="{ 'disable': isPay }" v-if="paybutton.zfbbutton==1">
                            立即支付
                        </div>
                    </div>
                </tempalte>
            </van-action-sheet>
            <!--<div class="tips_af on">-->
            <!--<div class="tips_af_box">-->
            <!--<div class="af_left"><b>余额抵扣</b></div>-->
            <!--<div class="af_right">-->
            <!--<span style="color: #fc5d4d" v-if="balancepay">-￥{{balancepaymoney}}</span>-->
            <!--<label class="am-switch">-->
            <!--<input type="checkbox" name="" class="am-switch-checkbox" value="off"-->
            <!--@click="isbalancepay()" :checked="balancepay">-->
            <!--<div class="checkbox"></div>-->
            <!--</label>-->
            <!--</div>-->
            <!--</div>-->
            <!--<div style="height: 30px">-->
            <!--<p class="zs" style="margin-bottom: 0;font-size: 13px">-->
            <!--<van-checkbox v-model="checked" shape="square" checked-color="#f9883c;" icon-size="14px">-->
            <!--<span>购买即代表您已阅读并同意</span><span @click.stop="showarticle" style="color: #f9883c;"-->
            <!--v-if="article.id">《{{article.title}}》</span>-->
            <!--</van-checkbox>-->

            <!--</p>-->
            <!--</div>-->
            <!--</div>-->
            <div class="f-btngroup">
                <div class="btn2 btn2-mb-0" @click="btngroupShow = !btngroupShow">需支付¥{{payprice}}元阅读全文</div>
                <!--<div class="btn1" @click="pay(1)" :class="{ 'disable': isPay }" v-if="paybutton.wxbutton==1">-->
                    <!--微信：{{payprice}}-->
                <!--</div>-->
                <!--<div class="btn2" @click="pay(2)" :class="{ 'disable': isPay }" v-if="paybutton.zfbbutton==1">-->
                    <!--支付宝：{{payprice}}-->
                <!--</div>-->
                <!--<div @click="tishiShow = false" v-if="tishiShow">-->
                    <!--<div class="lxp-box" v-if="paybutton.zfbbutton==1">-->
                        <!--<span style="color: #ffffff;font-size: 12px">如果微信无法支付，请用支付宝</span>-->
                        <!--<div class="lxp"></div>-->
                    <!--</div>-->
                <!--</div>-->
            </div>
            <!--<span class="hascount" v-if="zekou && zekou.zekou != -1">作者对你设置{{zekou.zekou}}折，原价<span>￥{{zekou.price}}-->
                <!--&lt;!&ndash;<img style="width: 12px;height: 12px" src="../../assets/img/money_icon.png"/></span>&ndash;&gt;-->
            <!--</span>-->
            <!--</span>-->
        </div>
        <div class="poparrow" v-if="alipayshow">
            <img src="../../assets/img/arrow.png"/>
            <div class="txt">
                1.点击右上角 " ... "<br>
                2.选择用浏览器打开<br>
                3.跳转至支付宝完成支付<br>
                4.付款后点击下方按钮刷新页面
            </div>
            <div class="finishbtn" @click="refresh()">已完成支付宝付款</div>
        </div>
        <div v-if="showcode01" class="pop">
            <div class="popmain">
                <div class="titlepop">接收消息通知</div>
                <div class="usermsg">
                    <img :src="materialsuser.avatar"/>
                    <div class="usermsg_r">
                        <div class="name">{{materialsuser.nickname}}</div>
                        <div class="tips">关注<span>“红料大全”</span>，就能第一时间收到我的更新推送哦～</div>
                    </div>
                </div>
                <img :src="Url+erweimagz" class="guanzhucode"/>
                <div class="tips01">↑↑长按识别二维码，订阅推送消息</div>
                <img src="../../assets/img/closeicon.png" class="closeicon" @click="showcode01=false"/>
            </div>
        </div>
        <div class="pop" v-if="shownowgzh==1 && !showcode02">
            <div class="popmain popcode02">
                <div class="titlepop">接收消息通知</div>
                <img :src="Url+shownowgzhewm" class="guanzhucode"/>
                <div class="tips01 tips02">↑↑长按识别二维码，关注公众号，接收消息提醒，查看购买记录</div>
                <img src="../../assets/img/closeicon.png" class="closeicon" @click="showcode02=true"/>
            </div>
        </div>
        <div class="baoshiclass" v-if="materials.saletype==1 && materials.baoshi.endtime">包时在
            <div class="djs">
                <span class="flag">{{countDay1}}</span>
                <span>天</span>
                <span class="flag">{{countDownHour1}}</span>
                <span>:</span>
                <span class="flag">{{countDownMinute1}}</span>
                <span>:</span>
                <span class="flag">{{countDownSecond1}}</span>
            </div>
            后到期
        </div>
        <van-dialog v-model="baishihintShow" title="温馨提示" confirmButtonText="我知道了">
            <div style="font-size: 14px;padding: 10px 20px;text-align: center">
                <div v-if="materials.baoshi">{{materials.baoshi.baishihintone}}</div>
                <div v-if="materials.baoshi">{{materials.baoshi.baishihinttwo}}</div>
                <div v-if="materials.baoshi">{{materials.baoshi.baishihintthree}}</div>
            </div>
        </van-dialog>
    </div>
</template>

<script>
    var timer, interval;
    import {ImagePreview} from 'vant';

    export default {
        name: "",
        data() {
            return {
                fanMaterials: {
                    previous: 0,
                    previousmateid: 0,
                    nextbutton: 0,
                    nextbuttonmateid: 0,
                },
                radio: '2',
                judges: false,
                btngroupShow: false,
                checked: false, // 购买前
                isPay: false,
                tishiShow: true,
                baishihintShow: false,
                materialsid: "",
                paystatus: 1,
                materialsuser: "",
                yucets: {
                    messageshow: 1,
                    messagecontent: ''
                },
                materials: {
                    baoshi: {
                        enddate: '',
                        endtime: ''
                    }
                },
                picsmf: [],
                picssf: [],
                showallstatus: "",
                user: "",
                alipayshow: false,  //微信浏览器支付宝支付提醒遮罩
                cols: 100,
                renderh: 0,  //文章渲染的高度
                scroll: 0,  //页面滚动的高度
                mbtsbutton: "",   //是否显示关注公众号按钮   1 显示  0 不显示
                shownowgzh: "",   //是否显示关注公众号弹窗  1 显示  0 不显示
                shownowgzhewm: "",
                showcode01: false,
                showcode02: false,
                users_gz: "",
                ordernum: 0,
                lastbuytime: "",
                matepay: {},
                zekou: "",   //折扣
                announcement: "",   //须知
                article: {
                    content: '',
                    description: '',
                    id: '',
                    image: '',
                    title: '',
                },   //须知协议
                paybutton: "",   //支付按钮显示
                warmprompt: "",   //顶部滚动内容
                balancepay: false,   //是否余额抵扣
                originalprice: "",  //支付原价
                balancepaymoney: "",   //抵扣价格
                payprice: "",    //最终价
                countdowns: false,    //是否是倒计时
                countDownHour: "00",  //时
                countDownMinute: "00", //分
                countDownSecond: "00", //秒
                limittimeshowtitle: "",  //限时查看提示文字
                countDay1: "0",         //天 包时段倒计时
                countDownHour1: "00",  //时
                countDownMinute1: "00", //分
                countDownSecond1: "00", //秒
                isshownum: 0
            }
        },
        components: {
            [ImagePreview.Component.name]: ImagePreview.Component,
        },
        created() {

        },
        mounted() {
            document.body.style.backgroundColor = "#ffffff";
            this.judging();
            this.getbrowsinghistory();
        },
        beforeDestroy() {
            document.querySelector("body").removeAttribute("style");
            document.body.style.fontSize = "12px";
        },
        watch: {
            $route(to, from) {
                var that = this;
                that.materialsid = to.params.id
                //console.log( to.params.id , from.params.id )
                // to , from 分别表示从哪跳转到哪，都是一个对象
                // to.path  ( 表示的是要跳转到的路由的地址 eg: /home );
                // that.judging();
                that.getbrowsinghistory();
                that.getDetail();
                that.getfanMaterials();
            }
        },
        methods: {
            /* 不对返还 */
            showReturn(type) {
                if (type != 1) return false;
                this.$dialog.confirm({
                    title: '温馨提示',
                    message: '不对返还',
                    showCancelButton: false,
                    overlayStyle: {backgroundColor: 'black'}
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 判断账户是否被冻结 */
            getbrowsinghistory() {
                let that = this;
                that.request1.postf({
                    url: that.Url + "api/materials/browsinghistory",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        if (res.data.code == 222) {
                            if (res.data.data.wxerweima) {
                                that.$dialog.confirm({
                                    title: '温馨提示',
                                    message: '您的账号被冻结了',
                                    showCancelButton: true,
                                    confirmButtonText: '联系客服',
                                    cancelButtonText: '联系作者',
                                    cancelButtonColor: '#ffd01e',
                                    overlayStyle: {'background-color': 'rgba(0, 0, 0, 1)'}
                                }).then(() => {
                                    that.$router.replace({name: 'locked'});
                                }).catch(() => {
                                    // on cancel
                                    that.$router.replace({name: 'locked', query: {wxerweima: res.data.data.wxerweima}})
                                });
                            } else {
                                that.$dialog.confirm({
                                    title: '温馨提示',
                                    message: '您的账号被冻结了',
                                    showCancelButton: false,
                                    confirmButtonText: '联系客服',
                                    overlayStyle: {'background-color': 'rgba(0, 0, 0, 1)'}
                                }).then(() => {
                                    that.$router.push({name: 'locked'})
                                }).catch(() => {
                                    // on cancel
                                });
                            }

                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            /* 展示协议 */
            showarticle() {
                this.$dialog.confirm({
                    title: this.article.title,
                    message: this.article.content,
                    showCancelButton: false,
                    messageAlign: 'left'
                })
                    .then(() => {
                        // on confirm
                    })
            },
            /* 获取翻页数据 */
            getfanMaterials() {
                let that = this;
                that.request1.postf({
                    url: that.Url + "api/materials/fanMaterials",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.fanMaterials = res.data.data;
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            otherPage(id) {
                this.$router.replace({path: '/Wodeliao/womaideliaoxq/' + id})
            },
            /* 获取下单次数 */
            getmatePayNum() {
                let that = this;
                that.request1.postf({
                    url: that.Url + "api/order/matePayNum",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.ordernum = res.data.data.ordernum;
                            that.lastbuytime = res.data.data.lastbuytime;
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            /* 展示图片 */
            showImg(imgUrl) {
                ImagePreview([this.Url + imgUrl]);
            },
            //  长按识别二维码 开始
            qrcodeimgStart(key) {
                var that = this;
                clearTimeout(this.Loop); //再次清空定时器，防止重复注册定时器
                this.Loop = setTimeout(function () {
                    that.$dialog.confirm({
                        message: '识别图中二维码',
                    }).then(() => {
                        // on confirm
                        var qr = new QrCode();

                        let img = this.$refs['qrcode'][key]
                        console.log(img);
                        qr.decodeFromImage(img, {
                            crossOrigin: "anonymous"
                        }).then((res) => {
                            console.log(res.data);
                            var ress = res.data;
                            var url = that.Url + 'api' + ress.match(/api(\S*)/)[1];
                            location.href = url;
                        });
                    })
                        .catch(() => {
                            // on cancel
                        });

                }.bind(this), 1000);
            },
            //  长按识别二维码 结束
            qrcodeimgEnd() {
                clearTimeout(this.Loop);
            },
            getGZerweima() {
                var that = this;

                that.request1.getf({
                    url: that.Url + "api/materials/getGZerweima",
                    params: {},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.shownowgzh = res.data.data.shownowgzh;
                            that.shownowgzhewm = res.data.data.shownowgzhewm;
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            //是否余额抵扣
            isbalancepay() {
                this.balancepay = !this.balancepay;
                this.imputeds();
            },
            imputeds() {
                var that = this;
                if (that.balancepay) {
                    that.payprice = that.accSub(that.originalprice, that.balancepaymoney)
                } else {
                    that.payprice = that.originalprice
                }
            },
            //减法
            accSub(arg1, arg2) {
                var r1, r2, m, n;
                try {
                    r1 = arg1.toString().split(".")[1].length;
                } catch (e) {
                    r1 = 0;
                }
                try {
                    r2 = arg2.toString().split(".")[1].length;
                } catch (e) {
                    r2 = 0;
                }
                m = Math.pow(10, Math.max(r1, r2));
                n = (r1 >= r2) ? r1 : r2;
                return ((arg1 * m - arg2 * m) / m).toFixed(n);
            },
            judging() {
                this.materialsid = this.$route.params.id;

                var ua = navigator.userAgent.toLowerCase();     //获取判断用的对象
                var local = window.location.href;       // 获取页面url
                if (local.indexOf("forms=") != -1 && ua.match(/MicroMessenger/i) != "micromessenger") {
                    const form = decodeURIComponent(local.match(/forms=(\S*)/)[1]);
                    console.log(form)
                    const div = document.createElement("div");
                    div.id = "alipay";
                    div.innerHTML = form;
                    document.body.appendChild(div);
                    var sign = document.getElementsByName("sign")[0].value.replace(/\s/g, "+");
                    document.getElementsByName("sign")[0].value = sign;
                    document.querySelector("#alipay").children[0].submit();
                } else {
                    if (!localStorage.getItem("token")) {
                        this.onloads();
                        return false;
                    }
                    var local = window.location.href;
                    if (local.indexOf("untokens=") != -1) {
                        var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                        if (ua.match(/MicroMessenger/i) == "micromessenger") {
                            this.$router.push("/artdefault");
                            return false;
                        }
                        console.log('step1');
                    } else {
                        console.log(local + '?untokens=' + localStorage.getItem("token"));
                        location.href = local + '?untokens=' + localStorage.getItem("token");
                        console.log('step2');
                    }
                    console.log('step3');
                    this.judges = true;
                    this.getDetail();
                    this.getgzherweima();
                    this.getGZerweima();
                    window.addEventListener('scroll', this.scrollTop);
                }
            },
            //点击接收推送按钮
            showgzerwm() {
                this.showcode01 = true;
            },
            //获取个人二维码
            getgzherweima() {
                var that = this;
                that.request1.getf({
                    url: that.Url + "api/materials/showgzherweima",
                    params: {},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.erweimagz = res.data.data.gzherweima;
                            that.users_gz = res.data.data.user;
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            scrollTop() {
                this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
                if (this.scroll >= (this.renderh)) {
                    this.setwatermarknum();
                }
            },
            // 设置水印循环数量
            setwatermarknum() {
                var that = this;

                if (that.materials.watermark && that.materials.watermark.length > 0) {
                    that.$nextTick(() => {
                        var h = that.$refs.element.offsetHeight;
                        var rows = Math.ceil(document.body.clientWidth / that.$refs.watermarktext[0].offsetWidth);
                        var line = Math.ceil(h / that.$refs.watermarktext[0].offsetHeight);
                        that.cols = Math.ceil(rows * line);
                        that.renderh = that.$refs.element.offsetTop + h;

                        console.log("rows:" + rows);
                        console.log("line:" + line);
                        console.log("h:" + h);
                    })
                }
            },
            //关注、取消关注
            guanzhu() {
                var that = this;

                that.request1.postf({
                    url: that.Url + "api/user.index/focusSave",
                    params: {focusid: that.materials.userid},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.$toast.success("操作成功");
                            that.getDetail();
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
            },
            //投诉
            report() {
                this.$router.push({
                    path: '/Wodeliao/liaocomplain/' + this.materialsid,
                    query: {
                        matertitle: this.materials.title
                    }
                })
            },
            refresh() {
                this.alipayshow = false;
                this.getDetail();
            },
            /* 暂停支付 */
            nopay(type) {
                this.$toast(`点击过频,请等待${this.matepay.matepausepayminutes}分钟后再次点击`);
            },
            // 点击支付
            pay() {
                let num = this.radio;
                var that = this;
                if (!that.checked) return that.$toast(`只有已阅读并同意${that.article.title}的用户才能购买本付费阅读资料`);
                if (num == 2) that.btngroupShow = false;
                // that.$dialog.alert({message: });
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                if (that.ordernum + 1 >= parseFloat(that.matepay.paynumber)) {
                    if ((that.ordernum) % parseFloat(that.matepay.paynumber) == 0) {
                        let date = new Date(that.lastbuytime).getTime();
                        let nowDate = new Date().getTime();
                        if ((nowDate - date) < (parseFloat(that.matepay.matepausepayminutes) * 60000)) {
                            return that.$toast(`点击过频,请等待${that.matepay.matepausepayminutes}分钟后再次点击`);
                        }
                    }
                }
                if (that.isPay) return this.$toast('支付排队中...');
                that.isPay = true;
                if (num == 1) {
                    var paymethod = 1;
                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                        //微信浏览器打开
                        paymethod = 1;
                    } else {
                        //h5打开
                        paymethod = 2;
                    }
                    //微信支付
                    that.request1.postf({
                        url: that.Url + "api/order/addOrder",
                        params: {
                            materialsid: that.materialsid,
                            paymethod: paymethod,
                            paytype: 1,
                            balance: that.balancepay ? 1 : 0
                        },
                        success: function (res) {
                            console.log(res)

                            if (res.data.code == 1) {
                                if (res.data.data.paytype == 3) {
                                    that.$toast.success("支付成功");
                                    that.isPay = false;
                                    timer = setTimeout(function () {
                                        that.balancepay = false;
                                        that.getDetail();
                                    }, 2000)
                                } else {
                                    var ress = JSON.parse(res.data.data);
                                    if (paymethod == 1) {
                                        WeixinJSBridge.invoke(
                                            'getBrandWCPayRequest', {
                                                "appId": ress.appId,     //公众号名称，由商户传入
                                                "timeStamp": ress.timeStamp,         //时间戳，自1970年以来的秒数
                                                "nonceStr": ress.nonceStr, //随机串
                                                "package": ress.package,
                                                "signType": ress.signType,         //微信签名方式：
                                                "paySign": ress.paySign //微信签名
                                            },
                                            function (res) {
                                                //console.log(res);
                                                // that.isPay = false;
                                                if (res.err_msg == "get_brand_wcpay_request:ok") {
                                                    that.$toast.success("支付成功");
                                                    that.isPay = false;
                                                } else if (res.err_msg == "get_brand_wcpay_request:cancel") {
                                                    that.$toast("支付取消");
                                                    that.isPay = false;
                                                } else {
                                                    that.$toast("支付失败");
                                                    that.isPay = false;
                                                }
                                                timer = setTimeout(function () {
                                                    that.balancepay = false;
                                                    that.getDetail();
                                                }, 2000)
                                            }
                                        );
                                    } else {
                                        that.$axios.post(that.Url + 'api/user.index/third', {}
                                        ).then(function (res) {
                                            that.isPay = false;
                                            console.log(res);
                                            if (res.data.code == 1) {

                                            }
                                        }).catch(function (error) {
                                            console.log(error)
                                        });
                                    }
                                }
                            } else {
                                alert("支付失败")
                                that.isPay = false;
                            }
                        },
                        fail: function (error) {
                            alert("支付失败")
                            that.isPay = false;
                        }
                    })
                } else {
                    //支付宝支付
                    that.request1.postf({
                        url: that.Url + "api/order/addOrder",
                        params: {
                            materialsid: that.materialsid,
                            paymethod: 2,
                            paytype: 2,
                            balance: that.balancepay ? 1 : 0
                        },
                        success: function (res) {
                            console.log(res)
                            if (res.data.code == 1 && res.data.data.paytype == 3) {
                                that.$toast.success("支付成功");
                                that.isPay = false;
                                timer = setTimeout(function () {
                                    that.balancepay = false;
                                    that.getDetail();
                                }, 2000)
                                return false
                            }
                            if (res.status == 200) {
                                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                                    //微信浏览器打开
                                    that.alipayshow = true;
                                    const form = res.data;
                                    var local = window.location.href;
                                    location.href = local + '&forms=' + encodeURI(form);
                                } else {
                                    //h5打开
                                    const form = res.data;
                                    const div = document.createElement("div");
                                    div.id = "alipay";
                                    div.innerHTML = form;
                                    document.body.appendChild(div);
                                    document.querySelector("#alipay").children[0].submit();
                                }
                            } else {
                                // alert(res.data.msg)
                            }
                        },
                        fail: function (error) {
//                            alert("支付失败")
                            that.isPay = false;
                            // alert(error.data.msg)
                            timer = setTimeout(function () {
                                that.balancepay = false;
                                that.getDetail();
                            }, 2000)
                        }
                    })
                }
            },
            getDetail() {
                var that = this;

                that.request1.postf({
                    url: that.Url + "api/materials/materialsContent",
                    params: {materialsid: that.materialsid},
                    success: function (res) {
                        console.log(res)
                        if (res.data.code == 1) {
                            that.warmprompt = res.data.data.warmprompt;
                            that.mbtsbutton = res.data.data.mbtsbutton;
                            that.matepay = res.data.data.matepay;
                            that.announcement = res.data.data.announcement;
                            if (res.data.data.article != null) {
                                that.article = res.data.data.article;
                            }
                            that.paystatus = res.data.data.paystatus;
                            that.materialsuser = res.data.data.materialsuser;
                            that.materials = res.data.data.materials;
                            that.showallstatus = res.data.data.showallstatus;
                            that.limittimeshowtitle = res.data.data.limittimeshowtitle ? res.data.data.limittimeshowtitle : "";  //限时查看提示文字

                            that.user = res.data.data.user;
                            that.zekou = res.data.data.zekou;
                            that.paybutton = res.data.data.paybutton;
                            that.originalprice = res.data.data.materials.price;
                            that.yucets = res.data.data.yucets;
                            that.payprice = JSON.parse(res.data.data.materials.price);
                            that.balancepaymoney = parseFloat(that.user.money) >= parseFloat(that.originalprice) ? parseFloat(that.originalprice) : parseFloat(that.user.money);
//                            that.picsmf=res.data.data.materials.picsmf;
//                            that.picssf=res.data.data.materials.picssf;

                            that.setwatermarknum();
                            if (that.materials.islimittimeshow == 1) {
                                //如果是限时商品，判断是否已经到时间了，倒计时
                                that.iscountdown();
                            }
                            if (that.materials.saletype == 1) {
                                //如果是包时段商品，倒计时
                                that.iscountdown1();
                                if (that.isshownum == 0 && that.materials.baoshi.endtime) {
                                    that.baishihintShow = true;
                                } else {
                                    that.materials.baoshi.endtime == '';
                                    that.materials.baoshi.enddate == '';
                                }
                                that.isshownum++;

                            }
                        } else {
                            // alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        // alert(error.data.msg)
                    }
                })
                that.getmatePayNum();
            },
            iscountdown() {
                //判断是否倒计时
                var that = this;
                var totalSecond = that.materials.limittimeshowtime - Date.parse(new Date()) / 1000;
                console.log(totalSecond);
                if (totalSecond > 0) {
                    timexuanran();
                    that.countdowns = true;
                    //倒计时
                    interval = setInterval(function () {
                        // 秒数
                        timexuanran()

                        if (totalSecond <= 0) {
                            clearInterval(interval);
                            that.countdowns = false;
                        }
                    }, 1000);
                }

                function timexuanran() {
                    var second = totalSecond;

                    // 小时位
                    var hr = Math.floor(second / 3600);
                    var hrStr = hr.toString();
                    if (hrStr.length == 1) hrStr = '0' + hrStr;

                    // 分钟位
                    var min = Math.floor((second - hr * 3600) / 60);
                    var minStr = min.toString();
                    if (minStr.length == 1) minStr = '0' + minStr;

                    // 秒位
                    var sec = second - hr * 3600 - min * 60;
                    var secStr = sec.toString();
                    if (secStr.length == 1) secStr = '0' + secStr;
                    that.countDownHour = hrStr;  //时
                    that.countDownMinute = minStr; //分
                    that.countDownSecond = secStr; //秒
                    totalSecond--;
                }
            },
            iscountdown1() {
                //判断是否倒计时
                console.log('触发没有');
                var that = this;
                var totalSecond = that.materials.baoshi.endtime - Date.parse(new Date()) / 1000;
                console.log(totalSecond);
                if (totalSecond > 0) {
                    timexuanran();
                    //倒计时
                    interval = setInterval(function () {
                        // 秒数
                        timexuanran()

                        if (totalSecond <= 0) {
                            clearInterval(interval);
                        }
                    }, 1000);
                }

                function timexuanran() {
                    var second = totalSecond;

                    //天
                    var day = Math.floor(second / 3600 / 24);
                    var dayStr = day.toString();
                    if (dayStr.length == 1) dayStr = '0' + dayStr;

                    // 小时位
                    var hr = Math.floor((second - (day * 3600 * 24)) / 3600);
                    var hrStr = hr.toString();
                    if (hrStr.length == 1) hrStr = '0' + hrStr;

                    // 分钟位
                    var min = Math.floor((second - (hr * 3600) - (day * 3600 * 24)) / 60);
                    var minStr = min.toString();
                    if (minStr.length == 1) minStr = '0' + minStr;

                    // 秒位
                    var sec = second - hr * 3600 - min * 60 - day * 3600 * 24;
                    var secStr = sec.toString();
                    if (secStr.length == 1) secStr = '0' + secStr;
                    that.countDay1 = dayStr;  //时
                    that.countDownHour1 = hrStr;  //时
                    that.countDownMinute1 = minStr; //分
                    that.countDownSecond1 = secStr; //秒
                    totalSecond--;
                }
            },
            onloads() {
                var that = this;
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象

                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    console.log("wx打开");
                    this.getCode();
                } else {
                    console.log("h5打开");
                    that.$router.push("/log/login")
                }
            },
            getCode() {
                var that = this;
                var local = window.location.href;// 获取页面url
                that.code = that.getUrlCode().code; // 截取code
                if (that.code == null || that.code === '') { // 如果没有code，则去请求
                    that.$axios.post(that.Url + 'api/index/getAppid', {
                        params: {},
                    }).then(function (res) {
//                  console.log(res.data.data)
                        if (res.data.code == 1) {
                            let ress = res.data.data;
                            let appid = ress.appid;
                            console.log("appid:" + appid)
                            window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
                        }
                    }).catch(function (error) {
                        console.log(error)
                    });
                } else {
                    that.login()
                }
                that.$axios.post(that.Url + 'api/user.index/third', {code: that.code}
                ).then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.judging();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
            getUrlCode() { // 截取url中的code方法
                var url = location.search;
                this.winUrl = url;
                var theRequest = new Object();
                if (url.indexOf("?") != -1) {
                    var str = url.substr(1);
                    var strs = str.split("&");
                    for (var i = 0; i < strs.length; i++) {
                        theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                    }
                }
                return theRequest
            },
            login() {
                var that = this;
                that.$axios.post(that.Url + 'api/user.index/third', {code: that.code}
                ).then(function (res) {
                    console.log(res);
                    if (res.data.code == 1) {
                        localStorage.setItem('token', res.data.data.userinfo.token);
                        that.judging();
                    }
                }).catch(function (error) {
                    console.log(error)
                });
            },
        },
        destroyed() {
            clearTimeout(timer);
            clearInterval(interval);
        }
    }
</script>

<style scoped>
    .yuce-style {
        margin: 0 auto;
        padding: 0 16px;
        background-color: #ffffff;
        text-align: center;
    }

    /deep/ .van-cell::after {
        border-bottom: none;
    }

    .seller-details .seller-details-title p.p2.xsck {
        font-size: 12px;
        color: #888;
    }

    .Affirms {
        color: #333;
        font-weight: bold;
        text-align: center;
    }

    /deep/ .van-notice-bar__content {
        padding-left: 50px;
    }

    .xsck span {
        margin-right: 4px;
        height: 20px;
        margin-top: 10px;
        line-height: 20px;
        font-size: 12px;
        border-radius: 4px;
        padding: 0 6px;
        display: inline-block;
        text-align: center;
        color: #fff;
        background: #f9883c;
    }

    .pop {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9;
    }

    .pop .popmain {
        width: 80%;
        height: 420px;
        background: #fff;
        border-radius: 5px;
        position: absolute;
        left: 10%;
        top: calc(50% - 210px);
        padding: 12px;
        box-sizing: border-box;
    }

    .pop .popmain .closeicon {
        position: absolute;
        right: 16px;
        top: 20px;
        width: 14px;
        height: 14px;
    }

    .pop .popmain .titlepop {
        position: relative;
        text-align: center;
        font-size: 16px;
        line-height: 36px;
    }

    .pop .popmain .usermsg {
        width: 94%;
        display: flex;
        flex-flow: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 20px auto;
    }

    .pop .popmain .usermsg img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    .pop .popmain .usermsg .usermsg_r {
        width: calc(100% - 62px);
    }

    .pop .popmain .usermsg .usermsg_r .name {
        font-size: 14px;
        line-height: 36px;
    }

    .pop .popmain .tips {
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        width: 100%;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
    }

    .pop .popmain .tips span {
        color: red;
    }

    .pop .popmain .guanzhucode {
        width: 148px;
        height: 148px;
        display: block;
        margin: 28px auto 0;
    }

    .pop .popmain .tips01 {
        width: 100%;
        line-height: 28px;
        margin: 20px auto;
        text-align: center;
        background: #fdfbb9;
        border-radius: 14px;
        color: #ca7952;
        font-size: 14px;
    }

    .codeusermsg {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .codeusermsg .left, .codeusermsg .left img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
    }

    .codeusermsg .right {
        border: 1px solid #ebd9a0;
        background: #faf3d8;
        padding: 4px 10px;
        box-sizing: border-box;
        border-radius: 4px;
        width: calc(100% - 62px);
    }

    .seller-details-gztx_btn {
        width: 74%;
        display: block;
        background: #4482e4;
        margin: 0.5rem auto;
        height: 42px;
        text-align: center;
        line-height: 42px;
        color: #fff;
        font-size: 16px;
        border-radius: 5px;
    }

    .contentgroup {
        margin-bottom: 24px;
        padding-top: 24px;
        /*position: relative;*/
        border-top: 1px solid #ccc;
    }

    /*.contentgroup:before{*/
    /*content: " ";*/
    /*display: block;*/
    /*width: calc(100% + 30px);*/
    /*height: 1px;*/
    /*background: #ccc;*/
    /*position: absolute;*/
    /*left: -15px;*/
    /*top: 0;*/
    /*z-index: 99;*/
    /*}*/
    .contentgroup .contentgroup_line01 {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
        z-index: 9;
    }

    .fontSizeMax {
        font-size: 13px;
    }

    .contentgroup .delbtn {
        background: #ccc;
        color: #fff;
        height: 20px;
        width: 54px;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
    }

    .seller-details .seller-details-title p.p2 .isreturn {
        border: 0.5px solid #ef4433;
        background: #ef4433;
        border-radius: 5px;
        color: #fff;
        font-size: 12px;
        padding: 1px 6px;
    }

    .poparrow {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
        color: #fff;
    }

    .poparrow img {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    .poparrow .txt {
        position: absolute;
        right: 50px;
        top: 88px;
        font-size: 20px;
        line-height: 45px;
    }

    .poparrow .finishbtn {
        position: absolute;
        left: 50px;
        top: 304px;
        width: calc(100% - 100px);
        background: #4483e4;
        height: 39px;
        text-align: center;
        line-height: 39px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
    }

    .seller-details {
        margin-bottom: 80px;
    }

    .seller-details .seller-details-title {
        /*background: #fff;*/
        padding-bottom: 20px;
        overflow: hidden;
        position: relative;
    }

    .seller-details .seller-details-title .user-box-left {
        position: absolute;
        top: 2%;
        left: 8%;
        z-index: 9;
    }

    .seller-details .seller-details-title .user-box-right {
        position: absolute;
        top: 2%;
        right: 8%;
        z-index: 9;
    }

    .seller-details .seller-details-title p {
        margin-top: 40px;
        display: block;
        text-align: center;
        font-size: 20px;
        line-height: 30px;
        font-weight: 700;
    }

    .seller-details .seller-details-title p.p2 {
        margin-top: 3px;
        display: block;
        text-align: center;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        padding: 0 25px;
    }

    .seller-details .seller-details-seller {
        height: 50px;
        /*background: #fff;*/
        width: 100%;
        padding-bottom: 10px;
    }

    .preOrnext {
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        /*background-color: #ffffff;*/
    }

    .prebtn, .nextbtn {
        background-color: #f9883c;
        color: #fff;
        font-size: 12px;
        padding: 5px 10px;
    }

    .seller-details .seller-details-seller .seller-details-seller-box {
        display: -webkit-box;
        height: 50px;
        background: #f4f4f8;
        border: .5px solid #ededf0;
        margin: 0 10px;
        border-radius: 4px;
    }

    .seller-details .seller-details-seller img {
        display: block;
        width: 36px;
        height: 36px;
        border-radius: 40px;
        margin-left: 10px;
        margin-top: 7px;
    }

    .seller-details .seller-details-seller .left {
        -webkit-box-flex: 1;
        padding-left: 10px;
        line-height: 50px;
        padding-right: 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .seller-details .seller-details-seller a {
        margin-right: 10px;
        height: 30px;
        margin-top: 10px;
        line-height: 30px;
        font-size: 12px;
        border-radius: 4px;
        padding: 0 10px;
        display: block;
        text-align: center;
        color: #fff;
    }

    .seller-details .seller-details-seller a.a2 {
        background: #f9883c;
    }

    .seller-details .seller-details-seller a.a1 {
        background: #4482e4;
    }

    .seller-details .seller-details-seller a.a1.active {
        background: #d9d9d9;
    }

    .seller-details .seller-details-box {
        border-top: 1px solid #e4e4e4;
        /*background: #fff;*/
        overflow: hidden;
        padding: 15px 0;
    }

    .seller-details .seller-details-box .top {
        overflow: hidden;
    }

    .seller-details .seller-details-box .top .time {
        float: left;
        display: block;
        font-size: 12px;
        color: #999;
        line-height: 22px;
    }

    .seller-details .seller-details-box .top .number {
        float: right;
        display: block;
        color: #999;
        font-size: 12px;
        text-align: right;
    }

    .red_ft {
        color: #fc5d4d !important;
    }

    .seller-details .seller-details-box .content {
        position: relative;
        overflow: hidden;
    }

    .seller-details .seller-details-box img {
        width: 100%;
        margin-bottom: 20px;
        margin-top: 10px;
    }

    .seller-details .report {
        display: block;
        float: right;
        color: #5189de;
        font-size: 12px;
    }

    .seller-details .seller-details-box .zs {
        font-size: 12px;
        color: #999;
        line-height: 18px;
        text-indent: 24px;
        margin-bottom: 50px;
    }

    .f-btngroup{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        /*min-height: 76px;*/
        background: rgba(255, 255, 255, 0.9);
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    /*.buybtn {*/
    /*position: fixed;*/
    /*bottom: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*min-height: 76px;*/
    /*background: rgba(255, 255, 255, 0.9);*/
    /*box-sizing: border-box;*/
    /*padding: 10px 20px 40px 20px;*/
    /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);*/
    /*}*/

    .buybtn {
        position: relative;
    }

    .tips_af {

    }

    .tips_af_box {
        display: -webkit-box;
        padding: 10px 16px;
    }

    .tips_af_box .af_left {
        -webkit-box-flex: 1;
    }

    .tips_af_box b {
        font-size: 13px;
        font-weight: 700;
        color: #000;
        display: block;
        line-height: 36px;
        padding-bottom: 2px;
    }

    .af_right {
        width: 50%;
        /*margin-top: 9px;*/
        display: flex;
        align-items: center;
        justify-content: flex-end;
        color: #333;
    }

    .agreement-box {
        margin-bottom: 10px;
    }

    .am-switch, .am-switch .checkbox {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
        margin-left: 5px;
    }

    .am-switch input[type=checkbox] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0 none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .am-switch .checkbox {
        width: 51px;
        height: 31px;
        border-radius: 31px;
        background: #e5e5e5;
        z-index: 0;
        margin: 0;
        padding: 0;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
        transition: all .3s;
    }

    .am-switch .checkbox {
        width: 38px;
        height: 20px;
        background: #7f7f7f;
    }

    .am-switch, .am-switch .checkbox {
        box-sizing: border-box;
        position: relative;
        cursor: pointer;
    }

    .am-switch .checkbox:before {
        width: 48px;
        box-sizing: border-box;
        z-index: 1;
        transform: scale(1);
    }

    .am-switch .checkbox:after, .am-switch .checkbox:before {
        content: " ";
        position: absolute;
        left: 1.5px;
        top: 1.5px;
        height: 28px;
        border-radius: 28px;
        background: #fff;
        transition: all .2s;
    }

    .am-switch .checkbox:before {
        left: -2px;
        width: 35px;
        height: 18px;
        border-radius: 18px;
        background: #7f7f7f;
    }

    .am-switch .checkbox:after {
        width: 28px;
        z-index: 2;
        transform: translateX(0);
        box-shadow: 2px 2px 4px rgba(0, 0, 0, .21);
    }

    .am-switch .checkbox:after {
        left: -1px;
        height: 18px;
        width: 18px;
        border-radius: 18px;
        top: 1px;
    }

    .am-switch input[type=checkbox]:checked + .checkbox {
        background: #fc5d4d;
    }

    .am-switch input[type=checkbox]:checked + .checkbox:before {
        transform: scale(0);
    }

    .am-switch input[type=checkbox]:checked + .checkbox:after {
        transform: translateX(20px);
    }

    .pay-title {
        display: flex;
        justify-content: center;
        font-size: 28px;
        font-weight: bold;
    }

    .pay-style {
        display: flex;
        align-items: center;
    }

    .pay-yue-style {
        font-size: 12px;
        color: #999;
    }

    .pay-text {
        margin-left: 20px;
        height: 48px;
        line-height: 48px;
    }

    .pay-text-yue {
        margin-left: 20px;
    }

    .buybtn .btngroup {
        width: 100%;
        /*height: 76px;*/
        display: flex;
        justify-content: space-between;
    }

    .buybtn .btngroup .btn1, .btn2 {
        width: 91%;
        height: 39px;
        text-align: center;
        line-height: 39px;
        color: #fff;
        font-size: 14px;
        border-radius: 5px;
        flex: 1;
        margin: 0 auto;
        margin-bottom: 30px;
    }

    .btn2-mb-0{
        margin-bottom: 0;
    }

    .btn-bottom{
        /*width: 91%;*/
        /*height: 39px;*/
        /*text-align: center;*/
        /*line-height: 39px;*/
        /*color: #fff;*/
        /*font-size: 14px;*/
        /*border-radius: 5px;*/
        /*flex: 1;*/
        /*margin: 0 auto;*/
        /*margin-bottom: 30px;*/
    }

    .buybtn .btngroup div:nth-child(2) {
        margin-left: .2rem;
    }

    .buybtn .btn1 {
        background: #27aa2a;
    }

    .buybtn .btn2 {
        background: #4483e4;
        position: relative;
    }

    .lxp-box {
        position: absolute;
        width: 170px;
        padding: 5px 10px;
        background-color: #f9883c;
        border-radius: 10px;
        bottom: 5px;
        right: 50px;
    }

    .lxp {
        position: absolute;
        top: -5px;
        right: 30px;
        border-style: solid;
        border-width: 0 0 15px 15px;
        transform: rotate(225deg);
        border-color: transparent transparent #f9883c transparent;
        width: 0px;
        height: 0px;
    }

    .buybtn .disable {
        background: #999999;
    }

    .buybtn .hascount {
        /*position: absolute;*/
        /*bottom: 0;*/
        /*left: 0;*/
        width: 100%;
        font-size: 12px;
        height: 24px;
        line-height: 24px;
        color: #fc5d4d;
        display: block;
        text-align: center;
    }

    .buybtn .hascount span {
        text-decoration: line-through;
    }

    .obligation {
        width: 228px;
        height: 32px;
        background: #fff0f0;
        border: 1px solid #e0c0c3;
        color: #c66c6e;
        margin: 50px auto;
        margin-bottom: 20px;
        text-align: center;
        line-height: 32px;
        border-radius: 16px;
    }

    .content-watermark {
        width: 150%;
        height: 100vh;
        position: fixed;
        z-index: -1;
    }

    .content-watermark p {
        font-weight: 700;
        display: block;
        float: left;
        font-size: 13px;
        margin: 18px 7px;
        text-shadow: -1px 0 #c2c2c2, 0 1px #c2c2c2, 1px 0 #c2c2c2, 0 1px #c2c2c2;
        color: #fff;
        opacity: .35;
        transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
    }

    .seller-details .seller-details-box .content .content-watermark {
        width: 150%;
        left: -25%;
        height: 100%;
        position: absolute;
        top: -10px;
        z-index: -1;
    }

    .seller-details .seller-details-box .content .content-watermark p {
        font-weight: 700;
        display: block;
        float: left;
        font-size: 13px;
        margin: 18px 7px;
        text-shadow: -1px 0 #999, 0 1px #999, 1px 0 #999, 0 1px #999;
        color: #fff;
        opacity: .35;
        transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod="auto expand", M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779);
    }

    .seller-details-box .iconmtype {
        position: absolute;
        width: 60px;
        height: 28px;
        text-align: center;
        line-height: 28px;
        border: 2px solid #7a7a7a;
        color: #000;
        left: 37%;
        font-size: 16px;
        font-weight: bold;
        opacity: 0.5;
        transform: rotate(-20deg);
        -o-transform: rotate(-20deg);
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
    }

    .iconmtype.i_1 {
        border-color: #e71500;
        color: #ef1701;
        background: rgba(255, 244, 243, 0.6);
    }

    .iconmtype.i_3 {
        border-color: #1565e5;
        color: #1062e3;
        background: rgba(242, 247, 255, 0.6);
    }

    .pop .popmain.popcode02 {
        height: 330px;
        top: calc(50% - 165px);
    }

    .pop .popmain.popcode02 .titlepop {
        line-height: 58px;
        height: 30px;
    }

    .pop .popcode02 .tips01.tips02 {
        background: none;
        line-height: 24px;
    }

    .countdowndiv {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #4482e4;
    }

    .countdowndiv .flag {
        font-size: 28px;
    }

    .countdowntips {
        text-align: center;
        margin: 14px auto 30px;
        font-size: 14px;
        color: #999;
    }

    .baoshiclass {
        width: 100%;
        height: 48px;
        padding: 0 12px;
        box-sizing: border-box;
        background: #fff;
        line-height: 48px;
        position: fixed;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
    }

    .baoshiclass .djs {
        color: rgb(252, 93, 77);
        margin: 0 5px;
    }
</style>
